<template>
  <div :class="['aside',aside_flag?'aside_a':'']">
    <div class="aside" v-if="contact_show">
      <!-- qq -->
      <div class="aside_o">
        <a href="http://wpa.qq.com/msgrd?v=3&uin=403176253&site=qq&menu=yes" target="_blank">
          <!-- <img class="pic_o" src="https://jingye.oss-cn-qingdao.aliyuncs.com/tb/h1.png" alt /> -->
          <!--  <img class="pic_o" src="https://jingye.oss-cn-qingdao.aliyuncs.com/tb/h5.png" alt />-->
          <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/bu/QQ.png" alt />
          <span>咨询我们</span>
        </a>
      </div>
      <!--电话 -->
      <div class="aside_t">
        <!-- <div class="aside_t_con"> -->
        <div class="aside_t_l">
          <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/bu/Phone.png" alt />
          <span>咨询电话</span>
        </div>
        <div class="mobile">
          <span>15000017750</span>
        </div>

      </div>
      <!-- 添加 -->

      <!-- 微信 -->
      <div class="aside_f">
        <div class="pic">
          <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/bu/weixin.png" alt />

          <!-- <img class="pic_o" src="https://jingye.oss-cn-qingdao.aliyuncs.com/tb/h3.png" alt /> -->
          <span>公众号</span>
        </div>
        <div class="WX"></div>
      </div>
      <!-- <div class="aside_fi" v-if="scrollTop >200 && scrollTop <t_top" @click="toBack"></div> -->
      <div class="aside_fi" v-if="scrollTop >200" @click="toBack">
        <img style="width:30px" src="https://jingye.oss-cn-qingdao.aliyuncs.com/liucheng/top.png" alt="">
        <span>回到顶部</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      aside_flag: false,
      scrollTop: 0,
      // 侧边栏回到顶部的显示距离
      t_top: 0,
      contact_show: false
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll, true)
  },
  destroyed() {
    window.removeEventListener('scroll', this.scrollToTop)
  },
  methods: {
    // 跳转页面
    toFuwu(key) {
      switch (key) {
        case 1:
          this.$router.push('/index/fuwu/website')
          break
        case 2:
          this.$router.push('/index/fuwu/wechat')
          break
        case 3:
          this.$router.push('/index/fuwu/app')
          break
        case 4:
          this.$router.push('/index/fuwu/vt')
          break
        default:
          break
      }
    },
    // 返回顶部
    toBack() {
      this.$emit('backTops', 0), this.$emit('scroll', this.scrollTop)
    },
    handleScroll(e) {
      this.scrollTop = e.target.documentElement.scrollTop || e.target.body.scrollTop
      // console.log(this.scrollTop)
      // // console.log(document.body.offsetHeight);
      this.t_top = document.body.offsetHeight - window.innerWidth - 200
      var bodyHeight = document.documentElement.clientHeight
      // console.log('屏幕高度：' + bodyHeight)
      // console.log('当前高度：' + this.scrollTop)
      this.contact_show = this.scrollTop >= bodyHeight / 2 + 120 ? true : false
      // console.log(this.t_top)
      // console.log(document.body.clientHeight)
      // this.scrollTop =
      //   e.target.documentElement.scrollTop || e.target.body.scrollTop;
      // this.t_top = document.body.offsetHeight - window.innerWidth - 200;
      if (100 < this.scrollTop) {
        this.aside_flag = true
      }
    }
  }
}
</script>

<style scoped >
@import url('../../assets/css/contact/index.css');
</style>
